﻿@{ ViewBag.Title = "jqGrid in ASP.NET MVC - Configuration Import/Export"; }
@section Css {
    <link href="@Url.Content("~/Content/jquery-ui.multiselect.css")" rel="stylesheet" type="text/css" />
}

<table id="products"></table>
<div id="productsPager" style="text-align:center;"></div>

@section JavaScript {
    <script type="text/javascript">
        $(document).ready(function () {
            //Calling jqGridImport, which will import configuration
            $('#products').jqGridImport({
                //We are expecting data in JSON format
                imptype: 'json',
                //URL to our action, which will return configuration
                impurl: '@Url.Action("ImportConfiguration", "Home")',
                //Method for the request
                mtype: 'GET',
                //Addidtional data, which will be passed to our action
                impData: { id: 'products' },
                //We inform the grid which property in object will hold configuration
                jsonGrid: { config: 'Settings' },
                //Function which will be called when import ends
                importComplete: function () {
                    //We set up a navigator wihout any standard buttons
                    $('#products').jqGrid('navGrid', '#productsPager', {
                        edit: false,
                        add: false,
                        del: false,
                        search: false
                        //because we will add our own button
                    }).jqGrid('navButtonAdd', "#productsPager", {
                        //Our button text
                        caption: 'Columns',
                        //Our button icon (jQuery UI class)
                        buttonicon: 'ui-icon-wrench',
                        //Our button position
                        position: 'last',
                        //Our button tooltip
                        title: 'Select columns',
                        //Function which will be called on click
                        onClickButton: function () {
                            //We are showing column chooser
                            $("#products").jqGrid('columnChooser', {
                                //Function which will be called when column chooser is closed
                                done: function (perm) {
                                    //We check if user has accepted
                                    if (perm) {
                                        //First we are resizing grid
                                        var gridWidth = this.jqGrid("getGridParam", "width");
                                        this.jqGrid("setGridWidth", gridWidth);
                                        //then we remap columns
                                        this.jqGrid("remapColumns", perm, true);
                                        //and in the end we will post configuration
                                        $.ajax({
                                            type: 'POST',
                                            //We are posting configuration in JSON
                                            contentType: 'application/json; charset=utf-8',
                                            //URL to our action, which store configuration
                                            url: '@Url.Action("ExportConfiguration", "Home")',
                                            //Calling jqGridExport for our data
                                            data: $('#products').jqGridExport({
                                                //We are exporting in JSON
                                                exptype: 'jsonstring',
                                                //We inform the grid what should be the name of property
                                                root: 'Settings'
                                            })
                                        });
                                    }
                                }
                            });
                        }
                    });
                }
            });
        });
    </script>
}